var index = 1;

function getInfromation(myindex) {
    index = myindex;
    if (myindex == 1) {
        $("#btn_project_list").attr("class", "panel-body");
        $("#btn_add_project").attr("class", "panel-footer");
        $("#btn_contact_us").attr("class", "panel-footer");
        $("#main_content").html("");
        $.ajax({
                url: address_head + "/api/GetAllProjectByOffset?start=0&offset=100",
                async: true,
                type: "POST",
                // 成功后开启模态框
                success: function (data) {
                    console.log(data);
                    $html = $("<ul id='project_list'></ul>");
                    $("#main_content").append($html);
                    for (i in data) {// data.data指的是数组，数组里是对象，i为数组的索引
                        $html = $("<li><div class=\"row clearfix\"><div class=\"col-md-9 column\">【" + data[i].number + "】 " + data[i].title +
                            "</div><div class=\"col-md-3 column\"><img onclick='showOrHide(" + data[i].id + ")' src='image/show.png' title='显示'/>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" +
                            "<img onclick='modifyProject(" + data[i].id + ")' src='image/modify.png' title='修改'/>" +
                            "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img onclick='deleteProject(" + data[i].id + ")' src='image/delete.png' title='删除'/></div></div><hr></li>");
                        $("#project_list").append($html);
                    }
                },
                error:
                    function () {
                        alert("请求失败");
                    },
                dataType: "json"
            }
        )
        ;
    } else if (myindex == 2) {
        $("#btn_project_list").attr("class", "panel-footer");
        $("#btn_add_project").attr("class", "panel-body");
        $("#btn_contact_us").attr("class", "panel-footer");
        /*新增项目*/
        $("#main_content").html("");
        $html = $("<form method='post' action='"+address_head+"/api/InsertProject'><div class=\"form-group\"><label for=\"exampleInputEmail1\">项目名称</label><input type=\"text\" name='title' class=\"form-control\" id=\"exampleInputEmail1\" placeholder=\"请输入项目名称...\" /> " +
            "</div> <div class=\"form-group\"><label for=\"exampleInputPassword1\">任务说明</label><textarea type=\"text\" name='introduction' class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"请输入详细任务说明...\">" +
            "</textarea> </div><div class=\"form-group\"><label>请选择类别</label><br><div id='type_checkbox_list'></div><hr></div><div class=\"form-group\"><label for=\"exampleInputFile\">演示图</label><input name='picture' type=\"file\" id=\"exampleInputPic\" multiple/>" +
            "<div id=\"show_selected_pic\"></div> <hr></div><div><label for=\"exampleInputFile\">上传附件</label><input type=\"file\" id=\"exampleInputFile\" /><hr></div><button type=\"submit\"  class=\"btn btn-default\">保存</button> " +
            "</form>");
        $("#main_content").append($html);
        showAllType();
    } else if (myindex == 3) {
        $("#btn_project_list").attr("class", "panel-footer");
        $("#btn_add_project").attr("class", "panel-footer");
        $("#btn_contact_us").attr("class", "panel-body");
        $("#main_content").html("");

    }
}

/**
 * 修改项目
 * @param id
 */
function modifyProject(id) {

}

/**
 * 删除项目
 * @param id
 */
function deleteProject(id) {
    if (id == null) {
        return;
    }
    var gnl = confirm("是否确认删除该项目?");
    if (gnl == true) {

    } else {
        return false;
    }
    $.ajax({
            url: address_head + "/api/DeleteProjectById?id=" + id,
            async: true,
            type: "POST",
            // 成功后开启模态框
            success: function (data) {
                console.log("deleteResult:" + data);
                if ("1" == data) {
                    getInfromation(1)
                } else {
                    alert("删除失败！")
                }
            },
            error:
                function () {
                    alert("请求失败");
                },
            dataType: "json"
        }
    )
    ;
}

/*action='"+address_head+"/api/InsertProject"+"'*/
function showAllType() {
    $.ajax({
            url: address_head + "/api/GetAllType",
            async: true,
            type: "POST",
            // 成功后开启模态框
            success: function (data) {
                console.log(data);
                for (i in data) {// data.data指的是数组，数组里是对象，i为数组的索引
                    console.log(data[i]);
                    $html = $("<input type=\"checkbox\" value='" + data[i] + "' name='project_type_checked'/><span>" + data[i] + "&nbsp&nbsp&nbsp</span>");
                    $("#type_checkbox_list").append($html);
                }
            },
            error:
                function () {
                    alert("请求失败");
                },
            dataType: "json"
        }
    )
    ;
}

function submitProject() {

    if ($(" #exampleInputEmail1 ").val() == null || $(" #exampleInputEmail1 ").val() == undefined) {
        alert("请输入项目名称！")
        return false;
    }
    if ($(" #exampleInputPassword1 ").val() == null || $(" #exampleInputPassword1 ").val() == undefined) {
        alert("请填写项目需求说明！")
        return false;
    }
    var typelist = "";
    $.each($('input:checkbox:checked'), function () {
        /* console.log("你选了："+
             $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());*/
        if ($('input[type=checkbox]:checked').length <= 0) {
            alert("请至少选择一个类别！")
            return false;
        }
        typelist = typelist == "" ? typelist + $(this).val() : typelist + "，" + $(this).val();
    });
    console.log("typelist:" + typelist);
    $.ajax({
            url: address_head + "/api/InsertProject",
            async: true,
            type: "POST",
            dataType: 'json',
            data: {
                typename: typelist,
                title: $(" #exampleInputEmail1 ").val(),
                introduction: $(" #exampleInputPassword1 ").val()
            },
            cache: false,
            success: function (data) {
                console.log("result" + data);
                if ("1" == data) {
                    getInfromation(1)
                } else {
                    alert("添加失败！")
                }
            },
            error:
                function () {
                    alert("请求失败");
                },
            dataType: "json"
        }
    );
}

var formData = new FormData();
$(document).ready(function () {
    //为外面的盒子绑定一个点击事件
    $(document).ready(function () {
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function () {
            /*
            1、先获取input标签
            2、给input标签绑定change事件
            3、把图片回显
             */
//      1、先回去input标签
            var $input = $("#file");
            console.log($input)
//      2、给input标签绑定change事件
            $input.on("change", function () {
                console.log(this)
                //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了" + length + "张图片");
                //3、回显
                $.each(files, function (key, value) {
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";
                    var fr = new FileReader();
                    fr.onload = function () {
                        img.src = this.result;
                        div.appendChild(img);
                        formData.append('photo', $('#file')[0].files[0]);
                        $("#all_pic_show").append(div);
                    }
                    fr.readAsDataURL(value);
                })
            })
            //4、我们把当前input标签的id属性remove
            $input.removeAttr("id");
            //我们做个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg" type="file" name="file" multiple id="file">';
            $("#uploadImgBtn").append($(newInput));
        })
    })
})

function uploadPic() {
    var data = formData;
//ajax请求
    $.ajax({
        type: "post",
        url: "接口地址",
        data: data,
        dataType: 'json',
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        xhrFields: {withCredentials: true},
        async: true,    //默认是true：异步，false：同步。
        success: function (data) {
            callback(data);
        },
        error: function (data) {
            layer.msg('请求异常');
        },
    });

}

